import Styled from 'styled-components';
let HomeStyled=Styled.div`
    .homebox{
       width:100%;
    }
    header img{
        width:100%;
        height:22rem;
    }
    section{
        width:22rem;
        margin:0 auto;
    }
    .goalTitle{
        width:6rem;
        height:3rem;
        /* background-color:red; */
        border:1px solid gray;
        margin-top:0.5rem;
        display:flex;
        span{
            width:0.8rem;
            height:0.8rem;
            background-color:gray;
            display:inline-block;
            margin-top:0.5rem;
        }
        h5{
            color:gray;
            width:2rem;
            margin-left:1rem;
            margin-top:0.5rem;
        }
    }
    .goalContent img{
        width:100%;
        height:6rem;
        margin:0.5rem 0;
    }
    .goalbox{
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin-bottom:2rem;
        img{
            width:2rem;
            height:2rem;
        }
        .goalsmallbox{
            width:8.5rem;
            height:6rem;
            border:1px solid gray;
            div{
                margin:1rem;
                p{
                    font-size:0.7rem;
                    color:gray
                }
                h3{
                    color:orange;
                    span{
                        font-size:1rem;
                    } 
                }
            }
        }
    }
    .threeValue{
        margin-bottom:0.5rem;
    }
    .valueTitle{
        width:6rem;
        height:3rem;
        border:1px solid gray;
        margin-top:0.5rem;
        display:flex;
        span{
            width:0.8rem;
            height:0.8rem;
            background-color:gray;
            display:inline-block;
            margin-top:0.5rem;
        }
        h5{
            color:gray;
            width:2rem;
            margin-left:1rem;
            margin-top:0.5rem;
        }
    }
    .valuebox{
        width:100%;
        /* height:9rem; */
        border:1px solid gray;
        margin-top:1rem;
        overflow:right;
        display:flex;
        .valueText{
            width:14rem;
            h5{
                text-align:center;
                font-size:1rem;
                color:rgb(37, 36, 36);
                margin:0.5rem;
            }
            b{
                font-weight:20;
                font-size:0.8rem;
                text-align:center;
                color:rgb(78, 64, 110);
                margin:0 0.5rem;
            }
            p{
              color:gray;
              font-size:0.8rem; 
              color:rgb(116, 111, 100);
              margin:0.5rem;
            }
        }
        img{
            width:8rem;
            /* height:auto; */
        }
    }
    .groupbox img{
        width:100%;
        height:12rem;
    }
`
export default HomeStyled;